<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Customer Manager</title>
<script type="text/javascript" src="js/third/jquery-3.2.1.min.js"></script>
<link rel="stylesheet" href="js/third/bootstrap.min.css"/>
<script src="js/third/bootstrap.min.js"></script>
<link rel="stylesheet" href="css/manager.css"/>
</head>
<body>
	<div>
		<h3>addCustomer</h3>
        name:<input type="text" name="name"/><p>
        sex:&nbsp;&nbsp;<input type="radio" name="sex" checked="checked" value="true"/>male&nbsp;&nbsp;&nbsp;<input type="radio" name="sex" value="false"/>female<p>
        salary:<input type="number" name="salary"/><p>
        birthDate:<input type="date" name="birth"/><p>
        <button id="add">add</button>
	</div>
	<hr>
	
	<div style="width: 800px;">
		<h2>Customer List</h2>
		<table class="table">
		    <thead>
		        <tr><th>ID</th><th>Name</th><th>Sex</th><th>Salary</th><th>BirthDate</th><th>Operation</th></tr>
		    </thead>
		    <tbody id="content">
		        
		    </tbody>
		</table>
	</div>
	
	<!--更新modal -->
    <div class="modal fade" id="updateModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
	  <div class="modal-dialog" role="document">
	    <div class="modal-content">
	      <div class="modal-header">
	        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
	        <h4 class="modal-title" id="myModalLabel">Detail Page</h4>
	      </div>
	      <div class="modal-body">
	        <table class="table" id="updateCus">
	            <tr>
	                <td>ID：</td>
	                <td><input type="text" name="id"disabled="disabled"/></td>
	            </tr>
	            <tr>
	                <td>Name：</td>
	                <td><input type="text" name="name"/></td>
	            </tr>
	            <tr>
	                <td>Sex：</td>
	                <td>
						<input type="radio" name="sex" value="true"/>male&nbsp;&nbsp;&nbsp;
						<input type="radio" name="sex" value="false"/>female
					</td>
	            </tr>
	            <tr>
	                <td>Salary：</td>
	                <td><input type="number" name="salary"/></td>
	            </tr>
	            <tr>
	                <td>BirthDate：</td>
	                <td>
	                	<input type="date" name="birth"/>
	                </td>
	            </tr>
	        </table>
	      </div>
	      <div class="modal-footer">
	        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
	        <button type="button" class="btn btn-primary" id="update">update</button>
	      </div>
	    </div>
	  </div>
	</div>
	
	<script type="text/javascript" src="js/ajaxUtil.js"></script>
	<script type="text/javascript" src="js/CustomerMag.js"></script>
	<script type="text/javascript" src="js/manager.js"></script>
</body>
</html>